<template>
	<view>
		<navbar title="订单详情" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__box">
				<view class="u-flex con__box__top" v-if="info.goodsInfo">
					<image :src="URL(info.goodsInfo.image)" class="con__box__pic" mode=""></image>
					<view class="">
						<view class="con__box__name u-line-1">
							{{info.goodsInfo.name}}
						</view>
						<view class="con__box__t">
							规格: {{ggtext}}
						</view>
						<view class="con__box__t u-line-1">
							总租金:￥{{(info.rent*qishu).toFixed(2)}}（分{{qishu}}期）
						</view>
						<view class="con__box__t u-line-1">
							数量: {{info.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="con__mx">
				<view class="con__mx__item">
					<view class="con__mx__item__num">
						{{(info.rent*qishu).toFixed(2)}}
					</view>
					<view class="con__mx__item__text">
						应还租金(元)
					</view>
				</view>
				<view class="con__mx__item">
					<view class="con__mx__item__num">
						{{yh}}
					</view>
					<view class="con__mx__item__text">
						已还租金(元)
					</view>
				</view>
				<view class="con__mx__item">
					<view class="con__mx__item__num">
						{{(info.rent*qishu).toFixed(2)-yh}}
					</view>
					<view class="con__mx__item__text">
						待还租金(元)
					</view>
				</view>
			</view>
			<view class="con__title">
				还款期数
			</view>
			<view class="con__item" v-for="(item,index) in info.repayment" :key="index">
				<view class="">
					<view class="con__item__a">
						{{qishu}}/{{index+1}}期
					</view>
					<view class="con__item__b">
						<!-- 2023-04-11 14:38:54 -->
						{{$u.timeFormat(item.repayment, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</view>
				<view class="">
					<view class="con__item__c">
						已还款
					</view>
					<view class="con__item__d">
						¥ {{(item.price+item.faxi)||0}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import boos from '@/api/_boos.js'
	export default {
		data() {
			return {
				id: null,
				loading: false,
				info: {},
				qishu: 0,
				yh:0,
				qishulist: [{
						t: 1,
						v: 6
					},
					{
						t: 2,
						v: 12
					},
					{
						t: 3,
						v: 24
					},
				],
				gglist: [],
				ggtext: ''
			};
		},
		onLoad(o) {
			this.id=o.id
			this.getinfo()
		},
		methods:{
			async getinfo(){
				let res = await boos.orderInfo({id:this.id})
				if(res.data.code==1){
					this.info=res.data.data
					this.qishu=this.qishulist[Number(this.info.hire_num)-1].v
					JSON.parse(this.info.spec_json).map(t=>{
						this.gglist.push(t.name)
					})
					this.ggtext=this.gglist.join(',')
					this.info.repayment.map(t=>{
						this.yh+=t.price
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			padding: 44rpx 33rpx 0;
			background-color: #FFFFFF;

			&__top {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F1F5F8;
			}

			&__pic {
				width: 177rpx;
				height: 177rpx;
				background: #3262FD;
				border-radius: 15rpx;
				margin-left: 5rpx;
				margin-right: 20rpx;
			}

			&__name {
				width: 410rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 30rpx;
				margin: 9rpx 0 8rpx;
			}

			&__t {
				width: 330rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7A7A7A;
				line-height: 40rpx;
				// margin-top: 18rpx;
			}
		}

		&__mx {
			padding: 50rpx 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			&__item {
				width: 33.33%;
				text-align: center;

				&__num {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 36rpx;
					color: #3D3D3D;
					line-height: 36rpx;
					margin-bottom: 20rpx;
				}

				&__text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 24rpx;
				}
			}
		}

		&__title {
			background: rgba(228, 228, 226, .3);
			padding: 0 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #2C2C2C;
			line-height: 81rpx;
		}

		&__item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 35rpx 30rpx 30rpx 38rpx;
			background-color: #fff;

			&__a {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #2C2C2C;
				line-height: 26rpx;
				margin-bottom: 17rpx;
			}

			&__b {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #888888;
				line-height: 18rpx;

			}

			&__c {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #313131;
				line-height: 24rpx;
				margin-bottom: 10rpx;
				text-align: right;
			}

			&__d {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #313131;
				line-height: 21rpx;
				text-align: right;
			}
		}
	}
</style>